<template>
    <div class="admin-layout">
        <div class="sidebar">
            <div class="logo">
                <img src="@/assets/logo.png" alt="Logo" class="logo-img">
                <h2>志愿服务管理系统</h2>
            </div>
            <el-menu :default-active="activeMenu" class="sidebar-menu" @select="handleSelect" background-color="#304156"
                text-color="#fff" active-text-color="#409EFF">
                <el-menu-item index="adminHome">
                    <el-icon><Bell /></el-icon>
                    <span>系统数据</span>
                </el-menu-item>
                <el-menu-item index="adminannouncementManage">
                    <el-icon><Bell /></el-icon>
                    <span>公告管理</span>
                </el-menu-item>
                <el-menu-item index="carousel">
                    <el-icon><Picture /></el-icon>
                    <span>幻灯片管理</span>
                </el-menu-item>
                <el-menu-item index="style">
                    <el-icon><Star /></el-icon>
                    <span>风采管理</span>
                </el-menu-item>
                <el-menu-item index="media">
                    <el-icon><VideoCamera /></el-icon>
                    <span>媒体管理</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
    Bell,
    Picture,
    Star,
    VideoCamera,
    Location,
    ArrowDown,
    SwitchButton
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const activeMenu = ref('adminHome')

// 计算当前位置
const currentLocation = computed(() => {
    switch(route.name) {
        case 'adminHome': return '系统数据'
        case 'announcementManage': return '公告管理'
        case 'carousel': return '幻灯片管理'
        case 'style': return '风采管理'
        case 'media': return '媒体管理'
        default: return '系统数据'
    }
})

// 菜单选择处理
const handleSelect = (key) => {
    router.push(`/${key}`)
}

// 退出登录
const handleLogout = () => {
    localStorage.clear()
    router.push('/login')
}
</script>

<style scoped>
.admin-layout {
    display: flex;
    min-height: 100vh;
    background-color: #f5f7fa;
}

.sidebar {
    width: 260px;
    background: linear-gradient(180deg, #304156 0%, #1f2d3d 100%);
    color: #fff;
    box-shadow: 4px 0 10px rgba(0, 21, 41, 0.15);
    z-index: 10;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.main-content {
    flex: 1;
    margin-left: 260px;
    background-color: #f5f7fa;
    min-height: 100vh;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.header {
    height: 64px;
    background: #fff;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 9;
}

.breadcrumb {
    display: flex;
    align-items: center;
    color: #5e6d82;
    font-size: 14px;
}

.breadcrumb-icon {
    margin-right: 8px;
    color: #409EFF;
    font-size: 16px;
}

.breadcrumb-text {
    margin-right: 8px;
    font-weight: 500;
}

.breadcrumb-current {
    color: #1f2d3d;
    font-weight: 600;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #5e6d82;
    font-weight: 500;
    transition: color 0.3s ease;
}

.el-dropdown-link:hover {
    color: #409EFF;
}

.logo {
    height: 64px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    background-color: #263445;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-img {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.1);
}

.logo h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.sidebar-menu {
    border-right: none;
    padding: 12px 0;
}

.sidebar-menu :deep(.el-menu-item) {
    height: 56px;
    line-height: 56px;
    margin: 4px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sidebar-menu :deep(.el-menu-item:hover) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding-left: 25px;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
    background-color: #409EFF !important;
    color: #fff !important;
}

@media screen and (max-width: 768px) {
    .sidebar {
        width: 80px;
    }

    .logo h2 {
        display: none;
    }

    .main-content {
        margin-left: 80px;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #909399;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #606266;
}
</style>